define(['AMap'], function (AMap) {
  'use strict';

  var TopOperate = {
    name: 'top-operate',
    template: '' +
    '    <div id="citytop">' +
    '        <div class="choicecity">' +
    '            <i-Select v-model="queryParams.city" placeholder="城市">' +
    '                <i-Option v-for="item in city" :value="item.value" :key="item.value">{{ item.label }}</i-Option>' +
    '            </i-Select>' +
    '        </div>' +
    '        <div class="chaxun_input">' +
    '            <input id="tip-input" type="text" placeholder="搜索">' +
    '        </div>' +
    '        <div class="regiontop">' +
    '            <i-Select v-model="queryParams.region" placeholder="区域">' +
    '                <i-Option v-for="item in region" :value="item.value" :key="item.value">{{ item.label }}</i-Option>' +
    '            </i-Select>' +
    '        </div>' +
    '        <div class="regiontop">' +
    '            <i-Select v-model="queryParams.type" placeholder="类型">' +
    '                <i-Option v-for="item in type" :value="item.value" :key="item.value">{{ item.label }}</i-Option>' +
    '            </i-Select>' +
    '        </div>' +
    '        <div class="regiontop">' +
    '            <i-Select v-model="queryParams.price" placeholder="价格">' +
    '                <i-Option v-for="item in price" :value="item.value" :key="item.value">{{ item.label }}</i-Option>' +
    '            </i-Select>' +
    '        </div>' +
    '        <div class="regiontop">' +
    '            <i-Select v-model="queryParams.houseType" placeholder="户型">' +
    '                <i-Option v-for="item in apartmentlayout" :value="item.value" :key="item.value">{{ item.label }}' +
    '                </i-Option>' +
    '            </i-Select>' +
    '        </div>' +
    '        <div class="regiontop">' +
    '            <i-Select v-model="queryParams.area" placeholder="面积">' +
    '                <i-Option v-for="item in themeasureofarea" :value="item.value" :key="item.value">{{ item.label }}' +
    '                </i-Option>' +
    '            </i-Select>' +
    '        </div>' +
    '        <div class="regiontop">' +
    '            <i-Select v-model="queryParams.more" placeholder="更多">' +
    '                <i-Option v-for="item in more" :value="item.value" :key="item.value">{{ item.label }}</i-Option>' +
    '            </i-Select>' +
    '        </div>' +
    '        <div class="listings">' +
    '            <div class="sangangimg"></div>' +
    '            <span>房源列表</span>' +
    '        </div>' +
    '    </div>',

    model: {
      prop: 'queryParams',
      event: 'update-query-params'
    },
    props: {
      queryParams: {
        type: Object,
        default: function () {
          return {
            city: '',
            district: '',
            type: '',
            price: '',
            houseType: '',
            area: '',
            more: ''
          }
        }
      }
    },

    data: function () {
      return {
        city: [
          {
            value: '海口市',
            label: '海口市'
          },
          {
            value: '文昌市',
            label: '文昌市'
          },
          {
            value: '琼海市',
            label: '琼海市'
          },
          {
            value: '三亚市',
            label: '三亚市'
          },
          {
            value: '澄迈县',
            label: '澄迈县'
          },
          {
            value: '东方市',
            label: '东方市'
          }
        ],
        region: [
          {
            value: '秀英区',
            label: '秀英区'
          },
          {
            value: '龙华区',
            label: '龙华区'
          },
          {
            value: '美兰区',
            label: '美兰区'
          },
          {
            value: '琼山区',
            label: '琼山区'
          }
        ],
        type: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        price: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        apartmentlayout: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {

            value: 'chongqing',
            label: '重庆市'
          }
        ],
        apartmentlayout2: '',
        themeasureofarea: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        themeasureofarea2: '',
        more: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        more2: '',
        autocompleteMap: {}
      }
    },

    watch: {
      queryParams: {
        deep: true,
        handler: function () {
          this.$emit('update-query-params', this.queryParams);
          window.bus.$emit('update-query-params', this.queryParams);
        }
      }
    },

    computed: {},

    methods: {
      init: function () {
        this.autocompleteMap = new AMap.Autocomplete({
          input: "tip-input",
          city: '海口'
        });

        this.autocompleteMap.on('select', function (data) {
          window.bus.$emit('autocomplete-select', data);
        })
      }
    },

    mounted: function () {
      this.init();
    }
  };

  return TopOperate;
});
